<template>
  <div class="simple-image-link" @click="handleClick">
    <img 
      :src="property.imageUrl" 
      alt="图片链接"
      class="image"
      @error="handleImageError"
    />
    <div v-if="imageError" class="error-placeholder">
      <Icon icon="ep:picture" :size="32" />
      <span>图片加载失败</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { SimpleImageLinkProperty } from './config'

defineOptions({ name: 'SimpleImageLink' })

const props = defineProps<{
  property: SimpleImageLinkProperty
}>()

const imageError = ref(false)

const handleClick = () => {
  if (props.property.linkUrl) {
    window.open(props.property.linkUrl, '_blank')
  }
}

const handleImageError = () => {
  imageError.value = true
}
</script>

<style scoped lang="scss">
.simple-image-link {
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  
  .image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
  }
  
  .error-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    background-color: #f5f5f5;
    color: #999;
    font-size: 12px;
    
    span {
      margin-top: 8px;
    }
  }
  
  &:hover .image {
    transform: scale(1.05);
  }
}
</style>

